
<template>
    <base-node type="klb_chat" :config="props.data" :id="props.id" ref="baseNode">
        <template #default>
            <label>知识库检索结果</label>
            <n-select placeholder="请选择知识库检索结果" clearable v-model:value="props.data.klbChatConfig.klbResultField"
                      :options="prevOutputFieldOptions"></n-select>
            <div class="mt-16 fx fx-m_between">
                <label>是否仅知识库模式</label>
                <n-switch v-model:value="props.data.klbChatConfig.onlyKlb" />
            </div>
            <div class="mt-16  fx-m_between" v-if="props.data.klbChatConfig.onlyKlb">
                <label>未匹配到知识库的回答</label>
                <n-input v-model:value="props.data.klbChatConfig.noMatchReply" />
            </div>
            <div class="mt-16 fx fx-m_between">
                <label>是否显示知识库参考</label>
                <n-switch v-model:value="props.data.klbChatConfig.showDocRefers" />
            </div>
            <div class="mt-16 fx fx-m_between">
                <label>是否开启视觉增强</label>
                <n-switch v-model:value="props.data.klbChatConfig.showWithHtml" />
            </div>
            <AiChatSetting v-model="props.data.llmConfig"
                           :out="['promptTpl','modelType','outputToResponse', 'useContext', 'persistDb']"
                           :inner="['systemRole','maxTokens', 'temperature', 'topP', 'topK']"  />


        </template>

        <template #footer>
            <p class="tc-gray ">输出字段</p>
            <div class="output mt-8 pad-8 fx fx-c_center fx-m_between">
                <div class="fx fx-c_center">
                    <div class="output-flag noshrink"></div>
                    <n-input v-model:value="props.data.klbChatConfig.outputField" placeholder="字段名"
                             class="tc-gray ml-8 w-140"></n-input>
                </div>
                <span class="tc-assist">AI生成的回答</span>
            </div>
        </template>

        <template #source>
            <Handle type="source" id="success" :position="Position.Right"
                    style="transform: translate(50%, calc(-50% - 30px))" />
            <Handle type="source" id="fail" :position="Position.Right"
                    style="transform: translate(50%, calc(-50% + 30px))" />
        </template>
    </base-node>
</template>

<script setup>
	import {
		Position,
		Handle,
		useNode,
		useVueFlow
	} from '@vue-flow/core'
	import AiChatSetting from './cnps/AiChatSetting.vue';
    import {
        computed,
        inject,
        onMounted,
        provide,
        ref,
        watch
    } from "vue";
	import {
		getNodeOutputFieldNames
	} from '../node-def'
    import BaseNode from "@/views/app/chain/nodes/BaseNode.vue";
    const baseNode = ref(null);
    provide("baseNode", baseNode)
	const flow = useVueFlow();

	const props = defineProps(['id', 'data'])
	provide('currentNodeId', props.id);


    /** 获取所有前置节点的输出字段，并生成下拉选项 */
    /** 获取所有前置节点的输出字段，并生成下拉选项 */
    const prevOutputFieldOptions = computed(() => {
        return baseNode.value ? baseNode.value.prevOutputFieldOptions : [];
    });


    //监听prevOutputFieldOptions
    watch(() => prevOutputFieldOptions.value, (newV) => {
        //如果节点初始化完成后，并且某次数组变动后不包含当前值，则清空input的值
        if (baseNode.value?.initDone && newV && !newV.find(v => v.value == props.data.klbChatConfig.klbResultField)) {
            // inputField.value = null;
            props.data.klbChatConfig.klbResultField = null;
        }
    })

</script>

<style scoped>
	._container {
		background-color: #fff;
		border: 1px solid #e5e7eb;
		border-radius: 12px;
		box-sizing: border-box;
		width: 380px;
		box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.1) 0px 4px 6px -4px;
	}

	.header,
	.form {
		border-bottom: 1px solid rgb(229, 231, 235);
	}

	.logo {
		background: #dcfce7;
		border-radius: 12px;
	}

	label {
		margin-bottom: 8px;
	}

	label:not(:first-child) {
		margin-top: 16px;
	}

	.output {
		background: rgb(249, 250, 251);
		border-radius: 12px;
	}

	.output-flag {
		width: 8px;
		height: 8px;
		border-radius: 50%;
		background: #22c55e;
	}
</style>